vue websocket实现消息推送和语音提醒功能

#vue websocket实现消息推送和语音提醒功能| 来源: 网络整理| 查看: 265

最近在做商家后台管理系统，在使用小程序或者app进行下单后，后台管理系统需要有实时的提醒，类似于美团或者饿了么的“您有新的订单，请注意查收”

具体的操作我没有写，是其他同事整的这一块。下面记录一下百度到的相关知识点。

vue + webSocket 实时任务信息通知

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

websocket 特点

建立在TCP协议之上，服务端的实现比较容易；与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器；数据格式比较轻量，性能开销小，通信高效；可以发送文本，也可以发送二进制数据没有同源限制，客户端可以与任意服务器通信协议标识符是 WS(如果加密，则为WSS)，服务器网址就是URL

VUE + WebSocket 长链接实现在项目的创建 utils/websocket.js import store from '../store' const WS = { $ws:null, // webscoket实例 wsUrl: 'ws://xxxxx.com:80/xxx', // websocket链接地址 createWS：function(){ if('WebSocket' in window){ this.$ws = new WebSocket(this.wsURl) this.$ws.onopen = this.wsOpen this.$ws.onmessage = this.wsMessage this.$ws.onerror = this.wsError this.$ws.onclose = this.wsClose } else { alert('当前浏览器不支持webSocket') } }, wsOpen: function() { this.$ws.send('连接成功') console.log('== websocket open ==') heartBeat.start() }, wsMessage:function(msg) { console.log('== websocket message ==', msg) heartBeat.reset() store.commit('SET_WS_MSG', msg.data) }, wsError: function(err){ console.log('== websocket error ==', err) }, wsClose: function(event){ console.log('== websocket close ==', event) } } const heartBeat = { timeout:30000, // 心跳重连时间 timeoutObj:null, // 定时器 reset:function(){ clearInterVal(this.timeoutObj) console.log('websocket 心跳') WS.start() }, start:function(){ this.timeoutObj = setTimeout(function(){ if(WS.$ws.readyState === 1){ WS.$ws.send('HeartBeat') } },this.timeout) } } export default WS 在main.js中引入WS，挂载到Vue原型上 import Vue from 'vue' import WS from '@/util/websocket' Vue.prototype.$ws = WS 在store/index.js创建全局数据存储 const store= new Vuex.Store({ state:{ webSocketMsg:'' }, mutations:{ SET_WS_MSG: (state, msg) =>{ state.webSocketMsg = msg } } }) 在单个组件内部使用 computed:{ getWsMsg (){ return this.$store.state.webSocketMsg } }, watch:{ getWsMsg:{ handler: function(newVal) { console.log(newVal) alert('接收到webSocket推送'+ newVal) } } } 如果要在所有的界面都能接收socket推送消息，并弹出提示可以在布局组件(Layout.vue …)中监听 computed:{ getWsMsg (){ return this.$store.state.webSocketMsg } }, watch:{ getWsMsg:{ handler: function(newVal) { console.log(newVal) alert('接收到webSocket推送'+ newVal) } } } vue实现语音播报功能 1,创建一个js文件（voicePrompt.js） function voicePrompt (text){ new Audio('http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + text).play(); } export { voicePrompt } 2在main.js中写入 import * as voicePromptFun from './utils/voicePrompt' Vue.prototype.voicePrompt = voicePromptFun.voicePrompt //语音提醒 3在其他页面调用 this.voicePrompt('皮卡丘');

【本文地址】

公司简介

联系我们